<template>
    <div class="loan-in-success" v-if='pageLoaded'>
        
        <div class="wrapper">
            <div class="header">
                <img src="../images/success.png" width="96" alt="">
                <p class='font-subhead'>借款信息发布成功</p>
            </div>
            
            <div class="card fundraising-card nail2">
                <div class="card__header">
                    <div class="loan-money">
                        <p class="loan-money__amount orange">{{ detail.borrowAmount | toYuan }}元</p>
                        <p class="loan-money__info"><i>{{ detail.borrowDays }}{{detail.daysTypeStr}}</i><i>{{ detail.yearRate / 100 }}%年化</i></p>
                    </div>
                    <div class="fundraising-info">
                        <p class='font-body1'>{{ detail.borrowStateStr }}</p>
                        <div class='font-caption'>
                            <p>有效期: </p><count-down :date='detail.borrowEffectiveTime'></count-down>
                        </div>
                    </div>
                </div>
                <ul class="card__info">
                    <li class="card__info-item">发布日期：{{ detail.createdAt | dateFormat }}</li>
                    <li class="card__info-item">借款用途：{{ detail.borrowUsage }}</li>
                    <li class="card__info-item">服务费：{{ detail.serviceFee | toYuan }}元</li>
                    <li class="card__info-item">还款方式：{{ detail.repayWayStr }}</li>
                    <li class="card__info-item">公开：{{ detail.public | booleanToStr }}</li>
                </ul>
                <div class="card__buttons">
                    <span class='card__button button short transparent' @click='goLoanInDetailMe(detail.borrowNo)'>查看详情</span>
                    <span class='card__button button short' @click='showShare'>分享借款</span>
                </div>
            </div>
        </div>

        <div class="footer" @click='goSquare'><img src="../images/youjie_successad@3x.png" width="100%"></div>

    </div>
</template>

<script>
    import { Promise } from 'es6-promise'
    import toYuan from '../filters/filter-toYuan'
    import dateFormat from '../filters/filter-dateFormat'
    import booleanToStr from '../filters/filter-booleanToStr'
    import countDown from '../components/CountDown.vue'
    import  { mapGetters, mapActions }  from 'vuex'
    import { loanInApi } from '../api/api'
    import moment from 'moment'

    export default {
        components:{
            countDown,
        },
        filters:{
            toYuan,
            dateFormat,
            booleanToStr
        },
        data() {
            return {
                borrowNo:this.$route.params.no,
                detail:{},
                pageLoaded:false
            }
        },
        computed:{
            ...mapGetters([
                'msgTip',
                'localInfo'
            ]),
        },
        methods:{
            // actions
            ...mapActions([
                'showLoading',
                'hideLoading',
                'setMsgTip',
                'setShare',
                'showShare'
            ]),


            // function
            share(item){
                let protocol = location.protocol
                let host = location.host
                let pathname = location.pathname
                let search = location.search

                let realUrl = `${protocol}//${host}${pathname}${search}#share-loan-in/${item.borrowNo}`
                this.setShare({
                    message:{
                        title: '求借款啊！我正在有借求借款，赶紧来借给我吧！', // 分享标题
                        desc: `金额: ${toYuan(item.borrowAmount)},时长: ${dateFormat(item.createdAt)}- ${dateFormat(item.borrowEffectiveTime)}, 利率: ${(item.yearRate / 100).toFixed(2)}%, 用途: ${item.borrowUsage}`, // 分享描述
                        link: realUrl, // 分享链接，该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
                        imgUrl: 'https://youjie.kongapi.com/pic/loading_1.png', // 分享图标
                        type: '', // 分享类型,music、video或link，不填默认为link
                        dataUrl: '', // 如果type是music或video，则要提供数据链接，默认为空
                        success: function () { 

                        },
                        cancel: function () { 

                        }
                    },
                    timeline:{
                        title: '求借款啊！我正在有借求借款，赶紧来借给我吧！', // 分享标题
                        link: realUrl, // 分享链接，该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
                        imgUrl: 'https://youjie.kongapi.com/pic/loading_1.png', // 分享图标
                        success: function () { 
                            
                        },
                        cancel: function () { 

                        }
                    },
                    qq:{
                        title: '求借款啊！我正在有借求借款，赶紧来借给我吧！', // 分享标题
                        desc: `金额: ${toYuan(item.borrowAmount)},时长: ${dateFormat(item.createdAt)}- ${dateFormat(item.borrowEffectiveTime)}, 利率: ${(item.yearRate / 100).toFixed(2)}%, 用途: ${item.borrowUsage}`, // 分享描述
                        link: realUrl, // 分享链接，该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
                        imgUrl: 'https://youjie.kongapi.com/pic/loading_1.png', // 分享图标
                        success: function () { 
                            
                        },
                        cancel: function () { 

                        }
                    },
                })
            },
            goSquare(){
                location.href = 'https://youjie.kongapi.com/other/daikuan/index.html?utm_source=anniuyoujie&utm_medium=annweixin#/loan-in-index'
            },
            goLoanInDetailMe(number){
                this.$router.push({
                    name:'loan-in-detail-me',
                    params:{
                        number:this.borrowNo
                    }
                })
            },
            getDetail(item){
                this.showLoading()
                loanInApi.detail({
                    borrowNo:this.borrowNo
                })
                .then(result=>{
                    this.detail = result
                    this.pageLoaded = true
                    this.share(result)
                    this.hideLoading()
                })
                .catch(error=>{
                    console.error(error)
                    this.pageLoaded = true
                    this.hideLoading()
                })
            },
        },
        created(){
            this.getDetail()
        }
    }
</script>

<style lang="scss">
    @import "../sass/variables";
    @import "../sass/extends";
    @import "../sass/mixins";
    .loan-in-success{
        .wrapper{
            padding-bottom: 100px;
        }
        .header{
            text-align: center;
            padding-bottom: 32px;
            img{
                padding-top: 48px;
            }
            .font-subhead{
                padding-top: 16px;
                color:$importColor;
            }
        }
        .footer{
            position: absolute;
            bottom:0;
            width: 100%;
        }
    }
</style>
